<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>{{name}}</h1>
    <h2>1.data中的结构体练习</h2>
    <b>作者名字</b>{{message.author}}<br>
    <b>作者电话</b>{{message.tel}}<br>
    <b>作者学校</b>{{message.school}}<br>
    <b>data中的数字定义方法：    </b>{{cout}}<br>


    <h2>2.data中的数组练习</h2>
    <ul>
        <li>{{skill[0]}}</li>
        <li>{{skill[1]}}</li>
        <li>{{skill[2]}}</li>
        <li>{{skill[3]}}</li>
    </ul>
</div>

<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            name:"这是一个用npm方式搭建的工程",
            message:{
                author:"lyh",
                tel:"188xxxx1399",
                school:"scut",
            },
            cout:1,
            skill:["Java","Tomcat","Maven","Spring"]
        }
    });
</script>
</body>
</html>